<!--
 * @author Santa Antilles
 * @description 单个调查模板
 * @date 2023/12/28-02:46:10
 * -->
<template>
  <div class="survey-item-container">
<!--    <h2 style="display: flex; align-items: center; justify-content: center">{{title}}</h2>-->
    <p style="display: flex; justify-content: center">{{surveyLine}}</p>
    <el-radio-group v-model="radio" class="ml-4" style="display: flex; justify-content: center">
      <el-radio v-for="item in options" :label="item.value">{{item.label}}</el-radio>
    </el-radio-group>
    <div class="bottom-split-line"/>
  </div>
</template>

<script>
export default {
  name: "SurveyItem",
  data(){
    return{
      options: [
        {label: "非常满意", value: 5},
        {label: "满意", value: 4},
        {label: "一般", value: 3},
        {label: "较差", value: 2},
        {label: "差", value: 1}
      ],
      radio: 10
    }
  },
  props:{
    // 本项调查内容
    surveyLine: String,
    // 调查id
    surveyId: String,
    // 本项调查id
    surveyItemId: String
  },
  watch:{
    radio(newValue, oldValue){
      this.$emit("selection-change", [newValue, this.surveyId, this.surveyItemId]);
    }
  }
}
</script>

<style scoped>
.survey-item-container{
  height: 80px;
  margin: 0 10px;
  background-color: #dedede;
  transition: background 0.5s ease;
  width: 480px;
}
.survey-item-container:hover{
  background-color: #efefef;
}
.bottom-split-line {
  border-top: 1px dashed #000;
  width: 100%;
}
</style>